<template>

  <ul class="news-list">
    <li>{{ query.id }}</li>
    <li>{{ query.title }}</li>
    <li>{{ query.content }}</li>
  </ul>

</template>

<script setup lang='ts' name='Detail'>
import { toRefs} from 'vue'
// hooks
import {useRoute} from 'vue-router'

let route = useRoute()

console.log(route)

// let { query } = route // 从响应式对象身上直接解构属性，属性就此失去响应式
let { query } = toRefs(route)

</script>

<style scope>
.news-list {
  list-style: none;
  padding-left: 20px;
}
.news-list>li {
  line-height: 30px;
}
</style>